<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<!--文档中使用了HTML5标准的API标签，与规定文档符合HTML4标准 形成冲突。-->
<!DOCTYPE html>
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>

<body>

<div style="width:400px;margin:40px auto 0 auto;">
    <canvas  id='bg'></canvas>
</div>

<script type="text/javascript">
    var fillStyle = ['rgb(255,154,2)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)']
            ,fillText = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','7等奖','8等奖','9等奖','10等奖']
            ,width = 400
            ,height = 400
            ,c_x = 200
            ,c_y =200
            ,radius = 170 // 圆盘半径
            ,canvas = document.getElementById('bg')
            ,index =0
            ,timer = null
            ,running = false // 是否运行中
            ,speed = 300 // 速度
            ,isBeginPrize = false // 是否开始抽奖
            ,stepping=0 // 步数，经过一个扇形为1步
            ,basecircle = 3 // 点击开始时，圆盘旋转的圈数，旋转玩指定圈数之后，再根据selected的值确定奖项
            ,selected =0; // 最终选中第几个扇形，也就是确定几等奖

    function setup(){
        drawCircle(false);

    }
    function drawCircle(isRunning){
        var deg = Math.PI/300;
        var startAngle = 0;
        var endAngle = 58;
        canvas.height = height;
        canvas.width = width;
        var ctx=canvas.getContext('2d');
        //绘制间隔色圆盘
        for(var i=0;i<10;i++){
            ctx.beginPath();

            // 正在运行的时候，改变当前扇形的颜色
            if(isRunning && index==i)
            {
                ctx.fillStyle = 'rgb(255,18,1)';
            }
            else
            {
                ctx.fillStyle = fillStyle[i];
            }

            // 绘制扇形
            ctx.moveTo(c_x,c_y);
            ctx.arc(c_x,c_y,radius,deg*startAngle,deg*endAngle,false);
            ctx.fill();

            // 绘制扇形上的文字
            ctx.font="12px Microsoft YaHei";
            ctx.fillStyle = '#000';
            ctx.textAlign = "center";
            ctx.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150);
            startAngle +=60;
            endAngle +=60;
        }


        // 绘制中心圆
        ctx.beginPath();
        ctx.arc(200,200,50,0,2*Math.PI,1);
        ctx.lineWidth=10;
        ctx.strokeStyle='rgb(210,92,4)';
        ctx.stroke();
        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.fill();

        // 绘制中心圆
        ctx.font="18px Microsoft YaHei";
        // 创建渐变
        var gradient=ctx.createLinearGradient(0,0,width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.4","blue");
        gradient.addColorStop("0.6","red");
        // 用渐变填色   填充到文字上面
//        canvas上下文对象，可以像js操作css属性一样设置css样式   但有具有自己独特的属性 如fillStyle strokeStyle  fill stroke  lineWidth等等
//        填充文本，并用样式控制  fillText("文本内容"，x位置，y位置);
        ctx.textAlign = "center";
        ctx.fillStyle=gradient;
        ctx.fillText("start",200,200-10);
        ctx.fillText("立即抽奖",200,200+20);

        // 绘制中心园边框   20161108已经在上面绘制圆的时候进行了边框绘制    多次绘制边框只会重叠，不会被取代
//        ctx.strokeStyle = 'rgb(0,0,0)';
//        ctx.lineWidth = 1;
//        ctx.stroke();
    }


    function rotate(){
        if(stepping==4){ // 4步之后开始加速
            clearTimer();
            console.log(speed)
            speed = +100;
            timer = setInterval(rotate,speed);
        }

        if(basecircle>0 && index ==10){ // 基本圈数借宿以后，开始随机抽奖
            index = 0;
            basecircle--;
            if(basecircle == 0) // 开始随机抽奖
            {
                clearTimer();
                speed = 300;
                timer = setInterval(rotate,speed);
                isBeginPrize = true;
            }

        }

        if(isBeginPrize && selected > 0) // 开始抽奖
        {
            console.log(selected);

            if(--selected == 0) //到了选择的奖项之后
            {
                clearTimer();
                isStop = true;

            }
            else
            {
                clearTimer();
                speed += 100;
                timer = setInterval(rotate,speed);
            }

        }

        drawCircle(true);
        index++;
        stepping++;

    }

    // 初始化抽奖参数
    function init()
    {
        basecircle = 4;
        selected =  (Math.floor(Math.random() * 10) + 1 );//输出1-10的随机数

        running= false;
        isBeginPrize = false;

        index = index++;

        stepping = 0;
        speed = 300;
    }

    function mouseDown_Start(e){

        var local = getPointOnCanvas(canvas, e.pageX, e.pageY);

        if(local.x > 100 && local.x < 300 && local.y>100 && local.y<300) // 中心圆区域
        {

            if(running){
                return;
            }

            init();

            timer = setInterval(rotate,speed);

        }
    }


    function clearTimer(){

        clearInterval(timer);
        timer = null;
    }

    function getPointOnCanvas(canvas, x, y) {

        var bbox =canvas.getBoundingClientRect();

        return { x:x- bbox.left *(canvas.width / bbox.width),

            y:y - bbox.top  * (canvas.height / bbox.height)

        };

    }

    setup();

    canvas.addEventListener("mousedown",mouseDown_Start,false);



</script>

</body>
</html>
